<template>
  <el-form-item v-for="item in attrValsChalkRef" :key="item.attr_id" :label="item.attr_name">
    <el-checkbox-group v-model="item.attr_vals" v-if="item.attr_vals && Array.isArray(item.attr_vals)" @change="chaleChange">
      <el-checkbox :label="itemVals" border v-for="(itemVals, i) in item.attr_vals" :key="i" class="me-1"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</template>

<script lang="ts">
import { defineComponent, ref, computed, Ref, watch } from 'vue'
import { attrValsProps } from '@/store/storeType'
import { useStore } from '@/store'

// 多选逻辑
const ChalkFn = (chalkRef: Ref) => {
  const store = useStore()
  const attrValsChalk = computed(() => store.state.productList.redactModule.redactData.attr_vals as attrValsProps[]) // 多选参数获取
  // 更新数据
  watch(() => attrValsChalk.value, val => chalkRef.value = val)
  // 多选点击
  const chaleChange = () => {
    // 更新数据
    chalkRef.value.forEach((item: any, index: any) => {
      if (store.state.productList.redactModule.redactData.attr_vals) {
        (store.state.productList.redactModule.redactData.attr_vals[index].attr_vals as string[]) = item.attr_vals
      }
    })
  }

  return { chaleChange }
}

export default defineComponent({
  setup() {
    let attrValsChalkRef = ref<attrValsProps[]>([])
    const { chaleChange } = ChalkFn(attrValsChalkRef)
    return { attrValsChalkRef, chaleChange }
  },
})
</script>
